<template>
	<div>
		<span v-if="dot" class="dot" :style="{...styles, backgroundColor: color}"></span>
		<span class="text" v-if="dot"><slot></slot></span>
		<strong class="text" v-else :style="{color}"><slot></slot></strong>
	</div>
</template>

<script>
export default {
	props: {
		type: {
			type: String, 
			required: false, 
			default: "default", 
			validator: function(val) {
				return ["primary" , "info", "success", "warn" , "error" , "default"].includes(val);
			}
		},
		dot: {
			type: Boolean , required: false, default: true
		}
	},
	data() {
		return {
			colors: [
				{color: "#2d8cf0", name: 'primary'} , 
				{color: "#2db7f5", name: 'info'} ,
				{color: "#19be6b", name: 'success'} ,
				{color: "#ff9900", name: 'warn'} ,
				{color: "#ed4014", name: 'error'} ,
				{color: "#808695", name: 'default'} ,
			], 
			styles: {
				width: "12px", 
				height: "12px",
				display: "inline-block", 
				borderRadius: "50%",
				verticalAlign: "middle" , 
				margin: "0 5px"
			}
		}
	},
	computed: {
		color() {
			return this.colors.find(c => c.name == this.type).color ;
		}
	}
}
</script>

<style>
	
</style>